<template>
  <view class="login-header">
    <view class="login-header__avatar" @click="toUserInfo">
      <img
        class="login-header__img"
        :src="
          obj.headImg ||
          'https://public-oss-file.zmaxfilm.com/applet/img/my/avatar.png'
        "
      />
    </view>
    <view class="login-header__right-area">
      <view
        v-if="obj.memberId"
        style="font-size: 34upx"
        class="mb10"
        @click="onLogin"
      >
        Hi~，{{ obj.nickName || obj.userName }}
      </view>
      <view v-else style="font-size: 34upx" class="mb10" @click="onLogin"
        >Hi~，欢迎登录/注册</view
      >
      <view class="login-header__userInfo" v-if="obj.nickName || obj.userName">
        <text>{{ userMobile }}</text>
        <!-- #ifndef MP-ALIPAY-->
        <text class="login-header__userInfo--role">{{ memberLevelName }}</text>
        <!-- #endif-->
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    computed: {
      userMobile() {
        if (this.obj.bindingMobile) {
          const mobile = this.obj.bindingMobile + ''
          const newMobile = mobile.substr(0, 3) + '****' + mobile.substr(7)
          return newMobile
        } else {
          return '***********'
        }
      },
      memberLevelName() {
        const x = ['团长', '组长', '普通用户']
        if (+this.obj.memberLevel) {
          return x[+this.obj.memberLevel - 1]
        } else {
          return '普通用户'
        }
      }
    },
    methods: {
      onLogin() {
        if (this.obj.bindingMobile) {
          return
        } else {
          // handleLogout()
          // this.$to('/pages/login/index')
          this.$tools.navigateTo('/pages/login/index')
        }
      },
      toUserInfo() {
        if (this.obj.bindingMobile) {
          // this.$to('/subPages/userInfo/index')
          this.$tools.navigateTo('/subPages/userInfo/index')
        } else {
          // handleLogout()
          this.$tools.navigateTo('/pages/login/index')
          // this.$to('/pages/login/index')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-header {
    display: flex;
    align-items: center;
    &__avatar {
      box-sizing: border-box;
      overflow: hidden;
      width: 138upx;
      height: 138upx;
      border-radius: 50%;
      border: 7upx solid #fff;
    }
    &__img {
      width: 100%;
      height: 100%;
    }
    &__right-area {
      margin-left: 40upx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #ffffff;
    }
    &__userInfo {
      display: flex;
      justify-items: center;
    }
    &__userInfo--role {
      box-sizing: border-box;
      padding: 2rpx 8rpx;
      margin-left: 14rpx;
      border: 1rpx solid #ffffff;
      border-radius: 21rpx;
      font-size: 21rpx;
    }
    &__userInfo--name-nologin {
      font-size: 40upx;
      font-weight: bold;
    }
    &__userInfo--name {
      font-size: 34upx;
      font-weight: bold;
    }
  }
</style>
